import Vue from "vue";
import VueRouter from "vue-router";

// component:()=>import('../views/ShouYe.vue'),

Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'hash',
    routes: [
        {
            path: '/shouye',
            name: 'shouye',
            component: () => import('../views/ShouYe.vue'),
            meta: {
                show: true
            }
        },
        {
            path: '/itemdetail/',
            name: 'itemdetail',
            component: () => import('../views/shouye/itemDetail.vue')
        },
        {
            path: '/fenlei',
            name: 'fenlei',
            component: () => import('../views/Fenlei.vue'),
            children: [
                {
                    path: 'remen',
                    name: 'remen',
                    component: () => import('../views/fenlei/ReMen.vue'),
                    meta:{
                        show:true
                    },
                    children:[
                        {
                            path:'xiangbao',
                            name:'xiangbao',
                            component:()=>import('../views/fenlei/remen/XiangBao.vue')
                        }
                    ]
                },
                {
                    path: 'shuma',
                    name: 'shuma',
                    component: () => import('../views/fenlei/ShuMa.vue'),
                    meta:{
                        show:true
                    }
                }
            ],
            meta: {
                show: true
            },
        },
        {
            path: '/car',
            name: 'car',
            component: () => import('../views/Car.vue'),
            meta: {
                show: true
            }
        },
        {
            path: '/',
            redirect: '/shouye'
        },
        {
            path:'/chongzhi',
            name:'chongzhi',
            component:()=>import('../views/ChongZhi.vue')
        }
    ]
})
// 添加路由
// 添加一级路由
router.addRoute({
    path: '/personcenter',
    name: 'personcenter',
    component: () => import('../views/PersonCenter.vue')
});
// 添加嵌套路由
router.addRoute('fenlei', {
    path: 'shouxuan',
    name: 'shouxuan',
    component: () => import('../views/fenlei/ShouXuan.vue')
})

// 全局守卫
console.log(router.beforeEach);
console.log(router.afterEach);
// router.beforeEach((to,from,next)=>{
//     console.log(to); //目标路由 去哪个路由
//     console.log(from);  //起始哪个路由 从哪里来
//     next(); //放行
//     // next(false) 中断 不执行
// })
// 首页能直接访问 分类和购物车不能直接访问 需要有个条件才能访问 充值
// 例如充值后 路由都放到固定的数组中
// const paths = ['/fenlei','/car'];
// 首页可以直接访问
// next()  当没有充值时 跳转到充值页面进行充值
const paths = ['/fenlei','/car'];
// 当你跳转去某个路由时 需要判断去的路由的路径是否在paths 在 需要判断它是否充值了 是充值 充值了放行 没有充值跳转到充值页面
// 不在直接放行
router.beforeEach((to,from,next)=>{
    // console.log(to);
    // console.log(from);
    // next();
    console.log(to.path);
    if(paths.indexOf(to.path)>=0){
        // 需要充值
        let flag = true;  //默认现在是充值
        if(flag){
            next();    //放行
        }else{
            // next('/chongzhi');   //不放行 跳转到指定路由
            next({name:'chongzhi'})
            // next({path:'/chongzhi'});
            next(false);    //不放行哪也去不了
        }
    }else{
        // 如果不在 放行
        next();
    }
})
router.afterEach((to,from)=>{
    console.log('这是后置守卫');
    console.log(to);
    console.log(from);
})

export default router;